iT邦幫忙

2022 iThome 鐵人賽

DAY 25
0
Modern Web

前端技術研究系列 第 25

認識 Higher-Order Component

  • 分享至 

  • xImage
  •  

Higher-Order Component(HOC)
指的是在 React 中能夠幫助我們重複使用程式碼的 React Component

// 官網中的範例
const EnhancedComponent = higherOrderComponent(WrappedComponent);
  • 被當作參數放入的 Component 稱作 Wrapped Component (ChildComponent),因為它是被 HOC 包住的。
  • Higher-Order Component 又稱作 Enhanced Component 或 Composed Component,但它其實是 Function。
    Wrapped Component 將 props 轉換為 UI,而高階組件將此組件轉換為另一個組件(Enhanced Component)。

這邊使用的範例是 React.memo
他就是一個 HOC,也是我還在不認識 HOC 是啥時 就已經使用過的一個例子(疑?偷用繞口令加字數XD

範例

function Menu() {
  console.log('memo component');
  return <h3 style={{ color: "pink" }}>挖洗 nMenu 啦</h3>;
}

// 加上 memo
export default React.memo(Menu);

被 React.memo 包住的 component ,在父層重新渲染時他會被記憶住,所以 React 將跳過渲染這個子組件,且使用上次渲染的結果。 React.memo 通過記憶結果來提高性能。

被 memo 住的 component 會去比較父層傳入的 props 前後變化,若是在父層 re-render 時,傳入的 props 前後值進行淺比較結果並無改變時,component 就不會重新渲染。但他本身內部 state 有變化時,這個被 memo 住的 component 依然會重新渲染。


上一篇
Redux Toolkit query 名詞解釋
下一篇
來認識 React.PureComponent 吧 - React 提升效能系列(一)
系列文
前端技術研究30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言